<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Label Generator</title>
    <link href="../static/assets/css/tailwind.min.css" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="16x16" href="../static/assets/images/favicon.ico">
    <style>
        body {
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start; /* Align content to the top */
            background-color: #f7fafc; /* Tailwind's gray-100 */
        }

        .container {
            width: 100%;
            max-width: 650px; /* Adjust as needed */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start; /* Align content to the top */
            padding: 1rem; /* Add some padding */
        }

        .form-container {
            margin-bottom: 16px;
        }

        .label-container {
            max-height: calc(100vh - 150px); /* Adjust based on form height */
            overflow: hidden;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .generated-label {
            width: 100%;
            max-height: calc(100vh - 150px); /* Ensure the image does not exceed the remaining height */
            object-fit: contain; /* Keep the image aspect ratio */
        }

        select {
            font-size: 16px; /* Increase font size */
            color: #333; /* Change text color */
            padding: 10px 15px; /* Add padding */
            border: 1px solid #ccc; /* Add border */
            border-radius: 5px; /* Add border radius */
            background-color: #fff; /* Background color */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow */
            transition: all 0.3s ease; /* Smooth transition */
        }

        select:focus {
            border-color: #0d6efd; /* Change border color on focus */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Change shadow on focus */
        }
    </style>
</head>
<body>
<div class="container bg-white p-8 rounded-lg shadow-lg w-full max-w-3xl">
    <h1 class="text-xl font-bold text-center mb-6">Label Generator</h1>
    <div class="form-container">
        <form id="labelForm" class="space-y-4">
            <div class="flex items-center space-x-4">
                <select id="brand" name="brand"
                        class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <!-- Options will be populated here -->
                </select>
                <button type="submit"
                        class="bg-indigo-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline hover:bg-indigo-700">
                    Generate
                </button>
            </div>
        </form>
    </div>
    <div id="labelContainer" class="label-container mt-8 flex justify-center">
        <!-- Label will be displayed here -->
    </div>
</div>

<script>
    // Fetch brands from the backend API and populate the dropdown
    const brandSelect = document.getElementById('brand');

    fetch('/electronic/generate_brands')
        .then(response => response.json())
        .then(brands => {
            brands.forEach(brand => {
                const option = document.createElement('option');
                option.value = brand.code;
                option.textContent = brand.name;
                brandSelect.appendChild(option);
            });
        })
        .catch(error => console.error('Error fetching brands:', error));

    document.getElementById('labelForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const brand = document.getElementById('brand').value;
        fetch(`/electronic/generate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({brand})
        }).then(response => response.json())
            .then(data => {
                const img = document.createElement('img');
                img.src = data.label_url;
                img.alt = 'Generated Label';
                img.classList.add('generated-label', 'rounded-lg', 'shadow-lg');
                document.getElementById('labelContainer').innerHTML = '';
                document.getElementById('labelContainer').appendChild(img);
            })
            .catch(error => console.error('Error:', error));
    });

</script>

</body>
</html>
